<template>
	<div>
		<div class="site-wrapper site-page--login">
		<div class="site-content__wrapper">
			<div class="site-content">
				<div class="brand-info">
					<div><img src="../../assets/img/渣男小四logo.png" /></div>
					<br />
					<h2 class="brand-info__text">SaaS餐饮管理系统</h2>
					<p class="brand-info__intro">为餐饮行业提供的一套完美解决方案</p>
					<br />
					<div>
						<div>微信公众号</div>
						<br />
						<img style="width: 35.5rem;height: 12.5rem" src="../../assets/img/wechat.png" />
					</div>
				</div>
				<div class="login-main">
					<h3 class="login-title">用户登录</h3>
					<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
						<el-form-item prop="userName"><el-input v-model="dataForm.userName" placeholder="帐号"></el-input></el-form-item>
						<el-form-item prop="password"><el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input></el-form-item>
						<el-form-item prop="captcha">
							<el-row :gutter="20">
								<el-col :span="14"><el-input v-model="dataForm.captcha" placeholder="验证码"></el-input></el-col>
								<el-col :span="10" class="login-captcha"><img :src="captchaPath" @click="getCaptcha()" alt="" /></el-col>
							</el-row>
						</el-form-item>
						<el-form-item><el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button></el-form-item>
						<el-form-item><el-link :underline="false" @click="register">立即注册</el-link></el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>


	<el-dialog title="用户注册" :visible.sync="registerDialog" width="30%" center>
			<el-form :model="registerForm" :rules="registerRule" ref="registerForm" @keyup.enter.native="findFormSubmit" status-icon>
				<el-form-item prop="mobile"><el-input v-model="registerForm.mobile" placeholder="手机号"></el-input></el-form-item>
				<el-form-item prop="code">
					<el-input v-model="registerForm.code" placeholder="请输入验证码">
						<template slot="append">
							<el-button @click="registerSend">{{ codeCount !== 0 ? codeCount + '秒' : '发送验证码' }}</el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password"><el-input prefix-icon="el-icon-lock" type="password" v-model="registerForm.password" placeholder="密码"></el-input></el-form-item>
				<el-form-item><el-button class="login-btn-submit" type="primary" @click="registerSubmit">立即注册</el-button></el-form-item>
			</el-form>
		</el-dialog>
	</div>

</template>

<script>
import { getUUID } from '@/utils';
import NavBar from '../reception/component/NavBar.vue';
export default {
	components: {
		NavBar
	},

	data() {
		return {
			dataForm: {
				userName: '',
				password: '',
				uuid: '',
				captcha: ''
			},
			registerForm: {
				mobile: '',
				code: '',
				password: ''
			},
			registerRule: {
				mobile: [
					{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}
				]
			},

			dataRule: {
				userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
				password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
				captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
			},
			captchaPath: '',
			registerDialog: false,
			codeCount: 0 //验证码倒计时
		};
	},
	created() {
		this.getCaptcha();
	},
	mounted() {
		//防止页面后退
		history.pushState(null, null, document.URL);
		window.addEventListener('popstate', function() {
			history.pushState(null, null, document.URL);
		});
	},

	methods: {
		register() {
			this.registerDialog = true;
			this.getCaptcha();
		},

		// 注册表单
		registerSubmit() {
			this.getCaptcha();
			this.$refs['registerForm'].validate(valid => {
				if (!valid) {
					return;
				}
				const { mobile, password } = this.registerForm;
				this.$http({
					url: this.$http.adornUrl('/sys/register'),
					method: 'post',
					data: this.$http.adornData({
						mobile,
						password
					})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '注册成功',
							type: 'success'
						});
						this.registerDialog = false;
						this.$refs['registerForm'].resetFields();
						this.status = 0;
					} else {
						this.getCaptcha();
						this.$message.error(data.msg);
					}
				});
			});
		},

		// 发送注册验证码
		registerSend() {
			const { mobile } = this.registerForm;
			if (!mobile) {
				return this.$message({
					type: 'error',
					message: '请输入手机号码'
				});
			}
			if (mobile.length !== 11) {
				return this.$message({
					type: 'error',
					message: '手机号码输入有误'
				});
			}

			this.$http({
				url: this.$http.adornUrl('/smsCode'),
				method: 'get',
				params: this.$http.adornParams({
					mobile: mobile
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message({
						message: '发送成功',
						type: 'success'
					});

					let timer = null;
					this.codeCount = 60;
					this.$nextTick(() => {
						timer = setInterval(() => {
							if (this.codeCount === 0) {
								return clearInterval(timer);
							}
							this.codeCount = this.codeCount - 1;
						}, 1000);
					});
				} else {
					this.$message.error(data.msg);
					this.getCaptcha();
				}
			});
		},

		// 提交表单
		dataFormSubmit() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					this.$http({
						url: this.$http.adornUrl('/sys/login'),
						method: 'post',
						data: this.$http.adornData({
							username: this.dataForm.userName,
							password: this.dataForm.password,
							uuid: this.dataForm.uuid,
							captcha: this.dataForm.captcha
						})
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$cookie.set('token', data.token);
							//this.registerDialog = true
							this.$router.replace({ name: 'chooseStore' });
						} else {
							this.getCaptcha();
							this.$message.error(data.msg);
						}
					});
				}
			});
		},
		// 获取验证码
		getCaptcha() {
			this.dataForm.uuid = getUUID();
			this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`);
		}
	}
};
</script>

<style lang="scss">
.site-wrapper.site-page--login {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(38, 50, 56, 0.6);
	overflow: hidden;
	&:before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		content: '';
		background-image: url(~@/assets/img/login_bg.jpg);
		background-size: cover;
	}
	.site-content__wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: transparent;
	}
	.site-content {
		min-height: 100%;
		padding: 30px 500px 30px 30px;
	}
	.brand-info {
		margin: 130px 100px 0 90px;
		color: #fff;
	}
	.brand-info__text {
		margin: 0 0 22px 0;
		font-size: 48px;
		font-weight: 400;
		text-transform: uppercase;
	}
	.brand-info__intro {
		margin: 10px 0;
		font-size: 16px;
		line-height: 1.58;
		opacity: 0.6;
	}
	.login-main {
		position: absolute;
		top: 0;
		right: 0;
		padding: 150px 60px 180px;
		width: 470px;
		min-height: 100%;
		background-color: #fff;
		opacity: 0.8;
	}
	.login-title {
		font-size: 16px;
	}
	.login-captcha {
		overflow: hidden;
		> img {
			width: 100%;
			cursor: pointer;
		}
	}
	.login-btn-submit {
		width: 100%;
		margin-top: 5px;
	}
}
</style>
